<template>
  <div class="madp-share-btn" v-show="isShowBtn">
    <div class="madp-fixed-share-btn cursor-pointer" @click="handleShare"></div>
    <div class="popver cursor-pointer" v-if="showPop" @click="showPop = false">
      <img class="arrows" src="@/assets/img/guide.png" alt="" />
    </div>
  </div>
</template>
<script>
import * as Utils from '@/utils/util'
export default {
  components: {},
  data() {
    return {
      isShowBtn: false,
      showPop: false
    }
  },
  props: {
    shareInfo: {
      type: Object,
      default: {}
    }
  },
  created() {},
  mounted() {
    if (this.$utils.pageEnv() == 'wx-mobile' || this.$utils.isComWx()) {
      this.isShowBtn = true
    } else {
      this.isShowBtn = false
    }
  },
  methods: {
    handleShare() {
      let entry = this.$store.state.vuex_entry
      if (entry === 'single_chat_tools' || entry === 'group_chat_tools' || entry === 'chat_attachment') {
        this.$wxApi.sendChatMessage('news', {
          link: this.shareInfo.link,
          title: this.shareInfo.title,
          desc: this.shareInfo.desc,
          imgUrl: this.shareInfo.imgUrl || `${Utils.apiUrl}/mfs/avatar.jpg`
        })
      } else {
        this.showPop = true
      }
    }
  }
}
</script>
<style scoped lang='scss'>
.madp-share-btn {
  .madp-fixed-share-btn {
    width: 80px;
    height: 80px;
    background: url('../assets/img//share_btn.png') no-repeat;
    background-size: contain;
    border-radius: 50%;
    position: fixed;
    bottom: 145px;
    right: -12px;
  }
  .popver {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    img {
      width: 200px;
      float: right;
      margin-right: 15px;
      margin-top: 10px;
    }
  }
}
</style>